<template>
  <div class="e-wrap">
    <div class="position-panel clearfix">
      <w-form-validate @on-validate="submitModify">
        <div v-if='updateParams.gfName != "applike"'>
          <upload-img @on-img='getImg' :imgSrc='commont.img' :type='`${$route.query.curChannel == "home"? "goodsFloor" : "channelFloor"}`'></upload-img>
          <!-- 新品上市的图标 -->
          <upload-img :title='`图标`' :imgSrc='commont.iconImg' v-if="updateParams.gfName == 'category'" :type='`${$route.query.curChannel == "home"? "goodsFloor" : "channelFloor"}`' @on-img='getCategoryImg'></upload-img>
          
          <href-type v-model="wideType" :three='`${$route.query.three}`' :terminal='`MOBILE`' :wideTemplate='updateParams.gfName'></href-type>

          <!-- 专题 -->
          <div v-if="updateParams.gfName == 'app_hotitems' || updateParams.gfName == 'category'">
            <div class="e-item" v-if="updateParams.gfName == 'category'">
              <span class="title">序号</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="commont.seq"  rule="isEmpty" error="*此项必填"></w-input>
              </div>
            </div>
            <div class="e-item" v-if="updateParams.gfName == 'category'">
              <span class="title">名称</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="commont.name"  rule="isEmpty" error="*此项必填"></w-input>
              </div>
            </div>
            <div class="e-item">
              <span class="title">主标题</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="commont.parentTitle"  rule="isEmpty" error="*此项必填"></w-input>
              </div>
            </div>
            <div class="e-item">
              <span class="title">主标题颜色</span>
              <div class="dis-block" style="padding-top: 8px;">
                <!-- <w-input :holder="`请填写`" v-model="commont.parentColor" rule="isColor" error="*输入合法的16进制色值"></w-input> -->
                <colorPicker v-model="commont.parentColor" @change="changeParentColor"></colorPicker>
              </div>
            </div>
            <div class="e-item">
              <span class="title">子标题</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="commont.childTitle"  rule="isEmpty" error="*此项必填"></w-input>
              </div>
            </div>
            <div class="e-item">
              <span class="title">子标题颜色</span>
              <div class="dis-block" style="padding-top: 8px;">
                <!-- <w-input :holder="`请填写`" v-model="commont.childColor"  rule="isColor" error="*输入合法的16进制色值"></w-input> -->
                <colorPicker v-model="commont.childColor" @change="changeChildColor"></colorPicker>
              </div>
            </div>
            <div class="e-item" v-if="position == 'rightUp'">
              <span class="title">副子标题</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="commont.title"></w-input>
              </div>
            </div>
            <div class="e-item" v-if="position == 'rightUp'">
              <span class="title">副子标题颜色</span>
              <div class="dis-block" style="padding-top: 8px;">
                <!-- <w-input :holder="`请填写`" v-model="commont.color" rule="isColor" error="*输入合法的16进制色值"></w-input> -->
                <colorPicker v-model="commont.color" @change="changeColor"></colorPicker>
              </div>
            </div>
          </div>

          <!-- 商品详情 -->
          <goods-detail v-if='wideType.type == "goodsInfo"' :defaultGood='defaultGood' @on-goods='getGoodsInfoId'></goods-detail>

          <!-- 商品列表 -->
          <goods-list v-if='wideType.type == "goodsList"' :defaultChecked='defaultChecked' @on-goods='getGoodsId'></goods-list>
        </div>
        
        <!-- 猜你喜欢 -->
        <goods-list v-if='updateParams.gfName == "applike"' :defaultChecked='defaultChecked' @on-goods='getGoodsList'></goods-list>

        <!-- 按钮 -->
        <div class='submit-btn'>
          <!-- <w-button @on-click='submitModify'>提交</w-button> -->
          <button type="submit" class="btn">提交</button>
          <button class="btn colse" @click.prevent="$router.go(-1)">取消</button>
        </div>
      </w-form-validate>
    </div>
  </div>
</template>

<script>
import colorPicker from '../classifyMange/components/colorPicker'
import GoodsList from '../advertMange/components/goodsList'
import UploadImg from './components/uploadImg'
import GoodsDetail from './components/goodsDetail'
import HrefType from './components/hrefType'
import { apiFloorMange, apiGoodsByIDList } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      wideType: {
        type: 'goodsInfo',
        text: '商品货号',
        value: ''
      },
      wideGoods: {},
      commont: {
        seq: '',
        name: '',
        img: '',
        iconImg: '',
        parentTitle: '',
        parentColor: '',
        childTitle: '',
        childColor: '',
        title: '',
        color: ''
      },
      position: this.$route.query.pos, // 位置
      curChannel: this.$route.query.curChannel, // 当前频道
      // 查询楼层 信息
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: Number(this.$route.query.id)
      },
      updateParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: Number(this.$route.query.id),
        gfName: this.$route.query.wideTemplate,
        wideGoods: ''
      },
      goodsList: [],
      defaultChecked: [],
      defaultGood: []
    }
  },
  components: {
    'goods-list': GoodsList,
    'upload-img': UploadImg,
    'goods-detail': GoodsDetail,
    'href-type': HrefType,
    colorPicker
  },
  created() {
    this._getFloorTempInfo()
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    // 获取楼层模板信息
    _getFloorTempInfo() {
      this.queryParams.accessToken = this.token
      if (this.$route.query.curChannel == 'home') {
        apiFloorMange.getHFloorInfo(this.queryParams).then(data => {
          this.wideGoods = JSON.parse(data.data.goodsFloor.wideGoods) || ''
          this.transformWideGoods()
        })
      } else {
        apiFloorMange.getCTemp(this.queryParams).then(data => {
          this.wideGoods = JSON.parse(data.data.widegoods.wideGoods) || ''
          this.transformWideGoods()
        })
      }
    },
    getImg(src) {
      this.commont.img = src
    },
    getCategoryImg(src) {
      this.commont.iconImg = src
    },
    changeParentColor(color) {
      this.commont.parentColor = color
    },
    changeChildColor(color) {
      this.commont.childColor = color
    },
    changeColor(color) {
      this.commont.color = color
    },
    getGoodsId(data) {
      let checkedId = []
      for (let i = 0; i < data.length; i++) {
        checkedId.push(data[i].id)
      }
      this.wideType.value = checkedId.join(',')
    },
    getGoodsList(data) {
      this.goodsList = data
    },
    getGoodsInfoId(data) {
      if (data.length) {
        this.wideType.value = data[0].id
      }
    },
    // 解析 wideGoods，获取当前模板信息
    transformWideGoods() {
      if (!this.wideGoods) return
      // app店铺
      if (this.updateParams.gfName == 'susiness') {
        this.wideType.type = this.wideGoods.type || 'goodsInfo'
        this.wideType.value = this.wideGoods.value
        this.commont.img = this.wideGoods.img
      }
      // 新品上市
      if (this.updateParams.gfName == 'category') {
        for (let i = 0; i < 2; i++) {
          let obj = this.wideGoods.CategoryList[i]
          if (obj.direction == this.position) {
            this.wideType.type = obj.type || 'goodsInfo'
            this.wideType.value = obj.value
            this.commont.seq = obj.seq
            this.commont.name = obj.CategoryName
            this.commont.img = obj.img
            this.commont.iconImg = obj.logoImg
            this.commont.parentTitle = obj.titleName
            this.commont.childTitle = obj.subtitleName
            this.commont.parentColor = obj.titleColor ? '#' + obj.titleColor : ''
            this.commont.childColor = obj.subtitleColor ? '#' + obj.subtitleColor : ''
          }
        }
      }
      // 猜你喜欢
      if (this.updateParams.gfName == 'applike') {
        this.defaultChecked = this.wideGoods.goodsList.map(item => {
          return {
            deleted: false,
            id: item.goodsId,
            goodsName: item.goodsName,
            lowestPrice: item.goodsPrice,
            goodsSerial: item.goodsSerial,
            goodsClassId: item.gcId,
            goodsMainPhotoPath: item.img
          }
        })
        // this.wideGoods.goodsList.forEach(item => {
        //   this.queryGood(Number(item.goodsId), this.defaultChecked)
        // })
      }
      // 专题
      if (this.updateParams.gfName == 'app_hotitems') {
        let obj = {}
        if (this.position == 'left') {
          obj = this.wideGoods.left
        } else if (this.position == 'rightUp') {
          obj = this.wideGoods.rightUp
        } else {
          obj = this.wideGoods.rightDown
        }
        this.wideType.type = obj.type || 'goodsInfo'
        this.wideType.value = obj.value
        this.commont.img = obj.img
        this.commont.parentTitle = obj.titleName
        this.commont.childTitle = obj.subtitleName
        this.commont.parentColor = obj.titleCol ? '#' + obj.titleCol : ''
        this.commont.childColor = obj.subtitleCol ? '#' + obj.subtitleCol : ''
        this.commont.title = obj.vicesubtitleName
        this.commont.color = obj.vicesubtitleCol ? '#' + obj.vicesubtitleCol : ''
      }
      if (this.wideType.type == 'goodsList') {
        // this.defaultChecked = []
        // let idArr = this.wideType.value.split(',')
        const par = {
          accessToken: this.token,
          threeMenuCode: this.$route.query.three,
          ids: this.wideType.value.split(',')
        }
        apiGoodsByIDList(par).then(data => {
          if (data && data.code != 200) return
          this.defaultChecked = data.data.map(item => {
            return {
              deleted: false,
              id: item.id,
              goodsName: item.goodsName,
              goodsMainPhotoPath: item.goodsMainPhotoPath
            }
          })
        })
      }
      if (this.wideType.type == 'goodsInfo') {
        this.defaultGood = []
        if (this.wideType.value) {
          const par = {
            accessToken: this.token,
            threeMenuCode: this.$route.query.three,
            ids: [Number(this.wideType.value)]
          }
          apiGoodsByIDList(par).then(data => {
            if (data && data.code != 200) return
            this.defaultGood = data.data.map(item => {
              return {
                deleted: false,
                id: item.id,
                goodsName: item.goodsName,
                goodsMainPhotoPath: item.goodsMainPhotoPath
              }
            })
          })
        }
      }
    },
    // 拼 wideGoods
    getWideGoods() {
      let wideGoods = {}
      if (!this.commont.img) {
        this.$toast('请上传图片')
        return false
      }
      if (!this.wideType.value) {
        if (this.wideType.type == 'goodsList') {
          this.$toast('请选择商品')
          return false
        } else {
          this.$toast(`请填写${this.wideType.text}`)
          return false
        }
      }
      // app店铺
      if (this.updateParams.gfName == 'susiness') {
        wideGoods = {
          type: this.wideType.type,
          value: this.wideType.value,
          img: this.commont.img,
          decorationType: 'app'
        }
      }
      // 新品上市
      if (this.updateParams.gfName == 'category') {
        let obj = {
          type: this.wideType.type,
          value: this.wideType.value,
          seq: this.commont.seq,
          direction: this.position,
          CategoryName: this.commont.name,
          img: this.commont.img,
          logoImg: this.commont.iconImg,
          titleName: this.commont.parentTitle,
          subtitleName: this.commont.childTitle,
          titleColor: this.commont.parentColor.substring(1),
          subtitleColor: this.commont.childColor.substring(1)
        }
        if (!this.wideGoods) {
          if (this.position == 'left') {
            wideGoods.CategoryList = [{}, obj]
          } else {
            wideGoods.CategoryList = [obj, {}]
          }
        } else {
          if (this.position == 'left') {
            wideGoods.CategoryList = [this.wideGoods.CategoryList[0], obj]
          } else {
            wideGoods.CategoryList = [obj, this.wideGoods.CategoryList[1]]
          }
        }
      }
      // 专题
      if (this.updateParams.gfName == 'app_hotitems') {
        let obj = {
          type: this.wideType.type,
          value: this.wideType.value,
          img: this.commont.img,
          titleName: this.commont.parentTitle,
          subtitleName: this.commont.childTitle,
          titleCol: this.commont.parentColor.substring(1),
          subtitleCol: this.commont.childColor.substring(1)
        }
        if (this.position == 'left') {
          wideGoods = {
            left: obj,
            rightUp: this.wideGoods.rightUp || {},
            rightDown: this.wideGoods.rightDown || {}
          }
        } else if (this.position == 'rightUp') {
          wideGoods = {
            left: this.wideGoods.left || {},
            rightUp: Object.assign(obj, {vicesubtitleName: this.commont.title, vicesubtitleCol: this.commont.color}),
            rightDown: this.wideGoods.rightDown || {}
          }
        } else {
          wideGoods = {
            left: this.wideGoods.left || {},
            rightUp: this.wideGoods.rightUp || {},
            rightDown: obj
          }
        }
      }
      return JSON.stringify(wideGoods)
    },
    submitModify() {
      this.updateParams.accessToken = this.token
      if (this.updateParams.gfName == 'applike') {
        let wideGoods = {}
        if (!this.goodsList.length) {
          this.$toast('请选择商品')
          return
        }
        let index = 1
        wideGoods.goodsList = this.goodsList.map(item => {
          return {
            type: 'goodsInfo', 
            seq: index++,
            goodsId: item.id,
            goodsName: item.goodsName,
            goodsPrice: item.lowestPrice || 0,
            value: item.id,
            img: item.goodsMainPhotoPath,
            goodsSerial: item.goodsSerial,
            gcId: item.goodsClassId
          }
        })
        this.updateParams.wideGoods = JSON.stringify(wideGoods)
      } else {
        if (!this.getWideGoods()) return
        this.updateParams.wideGoods = this.getWideGoods()
      }
      if (this.$route.query.curChannel == 'home') {
        apiFloorMange.editHTemp(this.updateParams).then(data => {
          if (data.code != 200) return
          this.$toast('编辑成功', () => {
            this.$router.go(-1)
          })
        })
      } else {
        apiFloorMange.editCTemp(this.updateParams).then(data => {
          if (data.code != 200) return
          this.$toast('编辑成功', () => {
            this.$router.go(-1)
          })
        })
      }
    },
    queryGood(idList, arr) {
      const par = {
        accessToken: this.token,
        threeMenuCode: this.$route.query.three,
        ids: idList
      }
      apiGoodsByIDList(par).then(data => {
        if (data && data.code != 200) return
        arr = data.data.map(item => {
          return {
            deleted: false,
            id: item.id,
            goodsName: item.goodsName,
            lowestPrice: item.storePrice,
            goodsSerial: item.goodsSerial,
            goodsClassId: item.gcId,
            goodsMainPhotoPath: item.goodsMainPhotoPath
          }
        })
        // let obj = {
        //   deleted: false,
        //   id: data.data.goodsDraft.id,
        //   goodsName: data.data.goodsDraft.goodsName,
        //   lowestPrice: data.data.goodsDraft.storePrice,
        //   goodsSerial: data.data.goodsDraft.goodsSerial,
        //   goodsClassId: data.data.goodsDraft.gcId,
        //   goodsMainPhotoPath: data.data.goodsDraft.goodsMainPhotoPath
        // }
        // arr.push(obj)
      })
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.position-panel {
  width: 978px;
  min-height: 700px;
  margin: 0 auto;
  .e-item {
    display: block;
    width: 405px;
    margin: 0 auto 20px;
    .title {
      width: 106px;
      font-size: 14px;
    }
    .dis-block {
      width: 284px;
    }
    .imgBox {
      width: 54px;
      height: 54px;
      display: inline-block;
      border: 1px solid $border-gray-light;
    }
    em {
      display: block;
      color: $color-main;
      text-align: right;
    }
  }
}
.submit-btn {
  text-align: center;
  margin: 40px 0;
  button {
    width: 90px !important;
  }
}
</style>
